
import React from 'react'
import ReactDOM from 'react-dom'

import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';

class CenterBindUnitEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {
        originPass: '',
        newPass: '',
        repeatPass: ''
      }
    }

  }


  componentDidMount() {
    this.$unitList = $(ReactDOM.findDOMNode(this.refs.unitLists));
  }

  componentDidUpdate () {

  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }


  onPassSubmit() {
    var data = this.state.data;
    var originPass = this.state.data.originPass
    var newPass = this.state.data.newPass
    var repeatPass = this.state.data.repeatPass


    if(!originPass){
      alert('请输入原密码');
      return;
    }else if(!newPass){
      alert('请输入新密码');
      return;
    }else if(!repeatPass){
      alert('请再次输入新密码');
      return;
    }else if(newPass != repeatPass){
      alert("两次输入的新密码不同");
      return;
    }

    this.props.onPassChange(data)

  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="centerSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog modal-lg" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">修改密码</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <div className="row">
                  <div className="col-xs-2 col-sm-2 col-xs-offset-3 col-sm-offset-3 label-pass">
                    <label for="unit-name">原密码</label>
                  </div>
                  <div className="col-xs-4 col-sm-4">
                    <input ref="originPass" type="password" class="form-control" id="exampleInputPass" placeholder="密码" value={this.state.data.originPass}
                          onChange={(event)=>this.onChange(event, 'originPass')}/>
                  </div>
                </div>
                <div className="row">
                  <div className="col-xs-2 col-sm-2 col-xs-offset-3 col-sm-offset-3 label-pass">
                    <label for="unit-name">新密码</label>
                  </div>
                  <div className="col-xs-4 col-sm-4">
                    <input ref="newPass" type="password" class="form-control" id="exampleInputPass" placeholder="新密码" value={this.state.data.newPass}
                        onChange={(event)=>this.onChange(event, 'newPass')}/>
                  </div>
                </div>
                <div className="row">
                  <div className="col-xs-2 col-sm-2 col-xs-offset-3 col-sm-offset-3 label-pass">
                    <label for="unit-name">再次输入新密码</label>
                  </div>
                  <div className="col-xs-4 col-sm-4">
                    <input ref="repeatPass" type="password" class="form-control" id="exampleInputPass" placeholder="再次输入新密码" value={this.state.data.repeatPass}
                          onChange={(event)=>this.onChange(event, 'repeatPass')}/>
                  </div>
                </div>


              </div>

            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onPassSubmit()}>提交</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    units: state.units
  }
}

export default connect(mapStateToProps)(CenterBindUnitEdit)
